<template>
  <el-container direction="vertical">
    <el-form :model="orderForm" :rules="rules" ref="orderForm" label-width="auto" class="demo-ruleForm orderForm">
      <el-form-item  label="套餐名称" prop="dishName">
        <el-select @change="changDish"  v-model="orderForm.dishName" placeholder="请选择套餐名称" style="width: 100%">
          <el-option
            v-for="item in dishs"
            :key="item.id"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量" prop="quantity" style="text-align: left">
        <el-input-number v-model="orderForm.quantity" @change="orderForm.cost=orderForm.price*orderForm.quantity" :min="1" :max="10" label="订餐数量" style=""></el-input-number>
      </el-form-item>
      <el-form-item label="总价" prop="cost">
        <el-input prefix-icon="el-icon-money" v-model="orderForm.cost" clearable readonly></el-input>
      </el-form-item>
      <el-form-item label="订餐人" prop="userName">
        <el-input prefix-icon="el-icon-user" v-model="orderForm.userName" clearable readonly></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('orderForm')">订餐</el-button>
        <el-button @click="resetForm('orderForm')">重置</el-button>
        <el-button type="info" @click="$router.go(-1)">返回</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>

<script>
import Qs from 'qs'
export default {
  data(){
    return{
      dishs: [],
      orderForm: {
        quantity: 1,
        cost: 0
      },
      rules: {
        dishName:[
          { required:true,message:'请选择套餐名称',trigger:'blur'}
        ]
      },
      user: {}
    }
  },
  created() {
    /*从sessionStorage获取用户登录的信息*/
    let userStr = sessionStorage.getItem('user') || '{}';
    this.user = JSON.parse(userStr);
    this.orderForm.userId = this.user.id;
    this.orderForm.userName = this.user.userName;
    /*加载套餐列表*/
    this.getDishList();
  },
  methods:{
    changDish(value){
      this.dishs.forEach((item)=>{
        if(item.name === value){
          this.orderForm.quantity = 1;
          this.orderForm.price = item.price;
          this.orderForm.cost = this.orderForm.quantity*this.orderForm.price
        }
      })
    },
    getDishList(){
      this.$http.get('/dish/query').then((response)=>{
        if(response.status === 200){
          if(response.data.code === 10000){
            this.dishs = response.data.data;
          }
        }else{
          this.$notify.error({
            title: '错误',
            message: response.status + response.statusText,

          });
        }
      })
    },
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = Qs.stringify(this.orderForm);
          this.$http.post('/order/add',params).then((response)=>{
              if(response.status === 200){
                if(response.data.code === 10000){
                  this.$notify({
                    title: '成功',
                    message: "您的取餐编号是"+response.data.data.id
                  })
                  this.orderForm.dishName = '';
                  this.orderForm.quantity = 1;
                  this.orderForm.cost = 0;
                }else{
                  this.$notify.error({
                    title: '错误',
                    message: response.data.msg
                  });
                }
              }else{
                this.$notify.error({
                  title: '错误',
                  message: response.status + response.statusText
                });
              }
            })
        }
      });
    },
    resetForm(formName){
      this.$refs[formName].resetFields();
    }
  },
}
</script>

<style scoped>

</style>
